<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>填写汇款信息</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/balance.css" />
</head>            
<body>
	<div class="page-group ms-controller" :controller="remittance">
        <div class="page page-current">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">填写汇款信息</h1>
            </header>
            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
                <div class="buttons-tab">
                    <a :on-click="@typeChoose(1)" :class="@type==1?'tab-link active button':'tab-link button'">填写汇款信息</a>
                    <a :on-click="@typeChoose(2)" :class="@type==2?'tab-link active button':'tab-link button'">汇款记录</a>
                </div>
                <div class="buttons-tab" :if="@type==2">
                    <a :on-click="@jump(0)" :class="@status==0?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">待核实</a>
                    <a :on-click="@jump(1)" :class="@status==1?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">已入金</a>
                    <a :on-click="@jump(2)" :class="@status==2?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">已驳回</a>
                </div>
            </div>                        
            <div class="content visibility infinite-scroll infinite-scroll-bottom" data-distance="100" :css="{'top': @type==1?'5.5rem':'6rem'}">
                <div :visible="@type==2" class="card" :for="el in @list">
                    <div class="card-content">
                        <div class="card-content-inner" style="overflow: hidden">
                            <ul style="list-style: none; padding: 0;margin: 0;">
                                <li style="float: left; padding: 5px 0;margin: 0;width: 100%; font-size: .8rem;">汇款银行:{{el.bank}}</li>
                                <li style="float: left; padding: 5px 0;margin: 0;width: 50%; font-size: .8rem;">汇款金额:{{el.remit_money}}</li>
                                <li style="float: left; padding: 5px 0;margin: 0;width: 50%; font-size: .8rem;">实际入款:{{el.receive_money}}</li>
                                <li style="float: left; padding: 5px 0;margin: 0;width: 50%; font-size: .8rem;">汇款时间:{{el.remit_time}}</li>
                                <li style="float: left; padding: 5px 0;margin: 0;width: 50%; font-size: .8rem;">汇款人:{{el.remit_name}}</li>
                                <li style="float: left; padding: 5px 0;margin: 0;width: 100%; font-size: .8rem;">存入手机号:{{el.recharge_mobile}}</li>
                                <li style="float: left; padding: 5px 0;margin: 0;width: 100%; font-size: .8rem;">补充说明:{{el.remark}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div :visible="@more" class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
                <div :visible="@type==1" class="tabs">
                    <div class="tab active">
                        <div class="list-block" style="margin:0; padding:0;">
                        <ul class="balance">
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">汇款银行</div>
                                        <div class="item-input">
                                            <input type="text" :duplex="bank" placeholder="银行底单上的银行名称">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">汇款金额</div>
                                        <div class="item-input">
                                            <input type="text" :duplex="money" placeholder="您汇款的具体金额(元)">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">汇款时间</div>
                                        <div class="item-input">
                                            <input type="text" id="time" readonly :duplex="time" placeholder="银行底单上写的汇款时间">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">汇款人</div>
                                        <div class="item-input">
                                            <input type="text" :duplex="name" placeholder="在银行的汇款人的名字">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">存入手机号</div>
                                        <div class="item-input">
                                            <input type="text" :duplex="phone" placeholder="汇款将要存入哪个会员手机号">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">补充说明</div>
                                        <div class="item-input">
                                            <input type="text" :duplex="other" placeholder="其他事宜，请在此补充说明">
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul> 
                        <button :on-click="@submit" id="submit" class="balance_btn">确认提交</button> 
                    </div>                 
                </div>
            </div>
        </div>
    </div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script>
	var remittance = avalon.define({
		$id: "remittance",
		list: [],
        bank: "",
        money: "",
        time: "",
        name: "",
        phone: "",
        other: "",
        page_num: 1,
        page_size: 10,
        loading: false,
        more: false,
        type: Mall.parseUrl( window.location.href ).type,
        status: Mall.parseUrl( window.location.href ).status || 0,
        getList: function( s, o ){
            var postData = {
                status: s,
                page_num: remittance.page_num,
                page_size: remittance.page_size 
            }
            if( remittance.loading ){
                return
            }
            remittance.loading = true;
            Mall.request( "/api/RemitList", postData )
                .always( function( data ){
                    if( data.error_code == 0 ){
                        if( o ){
                            remittance.list = remittance.list.concat( data.data.list );
                        }
                        else{
                            remittance.list = data.data.list;
                        }
                        if( remittance.page_num == data.data.page_total ){
                            remittance.more = false;
                        }
                        else{
                            if( data.data.list.length == 0 ){
                                remittance.more = false;
                            }
                            else{
                                if( remittance.type != 1 ){
                                    remittance.more = true;
                                }
                            }
                        }
                        remittance.page_num ++;
                    }
                    remittance.loading = false;
                } )
        },
		typeChoose: function( t ){
            var url = window.location.href.split( "?type=" )[0]+"?type="+t;
            remittance.type = t;
            remittance.page_num = 1;
			window.history.replaceState(null, null, url);
            if( t == 2 ){
               remittance.jump(0);
            }
            else{
                $("#time").calendar();
                remittance.more = false;
                if( $( ".empty" ).length ){
                    $( ".empty" ).remove();
                }
            }
		},
        jump: function(status){
            if( typeof status === "undefined" ){
                return
            }
            var url = window.location.href.split( "&status=" )[0]+"&status="+status;
            remittance.page_num = 1;
            remittance.status = status;
            remittance.list = [];
            window.history.replaceState(null, null, url);
            remittance.getList( remittance.status )
        },
        submit: function(){
            if( Mall.LOCK ){
                return
            }
            var postData = {
                bank: remittance.bank,
                remit_money: remittance.money,
                remit_time: remittance.time,
                remit_name: remittance.name,
                recharge_mobile: remittance.phone,
                remark: remittance.other
            }
            Mall.LOCK = true;
            $( "#submit" ).text( "提交中" );
            Mall.request( "/api/RemitSubmit", postData )
                .always( function( data ){
                    if( data.error_code == 0 ){
                        $.toast( "提交成功", 1000, "success",function(){
                            remittance.typeChoose(2);
                        } )
                    }
                    $( "#submit" ).text( "确认提交" );
                    Mall.LOCK = false;
                } )
        },
        getInfo: function(){
            Mall.request( "/api/UserInfo" )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            if( !data.data.mobile ){
                                $.alert( "请点击确定完善个人信息", function(){
                                    window.location.href = "/H5/memberperfect"
                                } )
                            }
                            else{
                                draw.info = data.data;
                                $( ".content" ).removeClass( "visibility" );
                            }
                        }
                    } )
        },
        infinite: function(){
            $(document).on('infinite', '.infinite-scroll-bottom',function() {
                if( remittance.more ){
                    remittance.getList( remittance.status, true );
                }
            });
            $.init();
        }
	})
    remittance.jump( Mall.parseUrl( window.location.href ).status );
    $( ".content" ).removeClass( "visibility" );
    avalon.scan( document.body );
    remittance.infinite();
    remittance.getInfo();
    $("#time").calendar();
</script>
</body>
</html>